<!--职务选择框-->
<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      :title="modalTitle"
      :width="dialogWidth"
      wrapClassName="j-user-select-modal"
      @ok="handleOk"
      destroyOnClose
      @visible-change="visibleChange"
    >
      <a-row>
        <a-col :span="showSelected ? 18 : 24">
          <BasicTable
            :columns="tableColumns"
            :useSearchForm="true"
            :formConfig="tableFormConfig"
            :api="getList"
            :searchInfo="searchInfo"
            :rowSelection="rowSelection"
            :indexColumnProps="indexColumnProps"
            v-bind="getBindValue"
          ></BasicTable>
        </a-col>
      </a-row>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref,watchEffect } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { selectProps } from '/@/components/Form/src/jeecg/props/props';

  export default defineComponent({
    name: 'DialogSelectModal',
    components: {
      //此处需要异步加载BasicTable
      BasicModal,
      BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
        loading: true,
      }),
    },
    props: {
      ...selectProps,
      //选择框标题
      modalTitle: {
        type: String,
        default: '请选择',
      },
      tableApi: {
        type: Function,
        default: () => {},
      },
      params: {
        type: Object,
        default: () => {},
      },
      tableFormConfig: {
        type: Object,
        default: () => {},
      },
      tableColumns: {
        type: Array,
        default: () => [{}],
      },
      dialogWidth:{
        type:String,
        default:'1100px'
      }
    },
    emits: ['register', 'getSelectResult'],
    setup(props, { emit }) {
      //注册弹框
      const [register, { closeModal }] = useModalInner();
      const attrs = useAttrs();
      //表格配置
      const config = {
        canResize: false,
        bordered: true,
        size: 'small',
        //改成读取rowKey,自定义传递参数
        rowKey: props.rowKey,
      };
      const getList = ref(props.tableApi);
      const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
      const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
        getList,
        getBindValue
      );

      const searchInfo = ref(props.params);


      watchEffect(() => {
        if(props.params){
          searchInfo.value = props.params
        }
      });
      /**
       * 确定选择
       */
      function handleOk() {
        getSelectResult((options, values) => {
          //回传选项和已选择的值
          emit('getSelectResult', options, values);
          //关闭弹窗
          closeModal();
        });
      }
      return {
        handleOk,
        register,
        visibleChange,
        getBindValue,
        indexColumnProps,
        getList,
        rowSelection,
        props,
        selectRows,
        handleDeleteSelected,
        searchInfo,
      };
    },
  });
</script>
